<template>
    <div>
      <router-link :to="{name:'newsDetail',params:{newsId:v.id}}" v-for="(v,i) in article" :key="i" @click="pageTo">
     <!-- <div v-for="(v,i) in article" :key="i"  @click="pageTo">-->
        <div class="news">
          <img :src="v.img" alt="">
          <p>{{v.title}}</p>
        </div>
     <!-- </div>-->
      </router-link>

    </div>
</template>

<script>
    export default {
        name: "newsList",
        props:["news"],
      data(){

          return{
            article:[],

          }
      },
      methods:{
          pageTo(){
            this.$router.push({
              path: '/newsDetail', query: {
                id: this.article.id,

              }
            })
          }
      },
      created(){
        var that=this;
        this.$http({
          url:'/offcial/index.php/index/Acticle/NewsTitle',
          method:'post',
          data:{
            time:this._globe.time1,
            device_id:this._globe.device_id,
            version:this._globe.version,
            platform:this._globe.platform,
            token:this._globe.token1,
          }
        })
          .then(function (response) {
            console.log(response);
            const resData=response.data;
            if(resData.code==1){
              that.article = resData.data;
              console.log(that.article);

            }
          })
          .catch(function (response) {
            console.log(response);
          });

      },
    }
</script>

<style scoped lang="scss">
.news{
  width: 92vw;
  height: 92vw;
  border-radius: 3vw;
  overflow: hidden;
  margin: 0px auto;
  margin-top: 5vw;
    img{
      width: 100%;
      height: 100%;
    }
    p{
      color: #fff;
      font-size: 20px;
      width:92vw;
      height: 26.67vw;
      padding: 2vw;
      position: relative;
      top: -26.67vw;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-top: 7vw;
      text-align: left;
      background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
    }
}
  @media screen and (max-width: 375px) and (min-width: 320px){
    p{
      font-size: 19px !important;
    }
  }
</style>
